<script setup>
import { ref, onMounted } from 'vue'

// 图片列表
const imageList = ref([])
const loading = ref(true)
const currentPage = ref(1)
const totalCount = ref(0)
const pageSize = ref(12)

// 筛选选项
const searchQuery = ref('')
const sortBy = ref('date')
const sortOrder = ref('desc')

// 模拟获取图片数据
const fetchImages = () => {
  loading.value = true
  
  // 模拟API请求延迟
  setTimeout(() => {
    // 生成模拟数据
    const mockImages = []
    const total = 36
    
    for (let i = 1; i <= total; i++) {
      mockImages.push({
        id: i,
        name: `image_${i}.jpg`,
        url: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/300/200`,
        thumbnailUrl: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/300/200`,
        size: `${Math.floor(Math.random() * 1000) + 100} KB`,
        uploadTime: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000).toISOString(),
        dimensions: `${Math.floor(Math.random() * 1000) + 400}x${Math.floor(Math.random() * 1000) + 300}`,
        type: 'image/jpeg'
      })
    }
    
    totalCount.value = total
    
    // 模拟分页
    const startIdx = (currentPage.value - 1) * pageSize.value
    const endIdx = startIdx + pageSize.value
    imageList.value = mockImages.slice(startIdx, endIdx)
    
    loading.value = false
  }, 800)
}

// 处理页面变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchImages()
}

// 处理排序变化
const handleSortChange = () => {
  fetchImages()
}

// 复制图片链接
const copyImageLink = (url) => {
  navigator.clipboard.writeText(url)
    .then(() => {
      alert('链接已复制到剪贴板')
    })
    .catch(err => {
      console.error('复制失败:', err)
    })
}

// 删除图片
const deleteImage = (id) => {
  // 模拟删除操作
  imageList.value = imageList.value.filter(img => img.id !== id)
  totalCount.value--
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 初始化
onMounted(() => {
  fetchImages()
})
</script>

<template>
  <div class="gallery-container">
    <!-- 标题和搜索框 -->
    <div class="gallery-header">
      <h2>图片管理</h2>
      
      <div class="gallery-tools">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索图片..." 
            @keyup.enter="fetchImages"
          />
          <button class="search-btn" @click="fetchImages">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </button>
        </div>
        
        <div class="sort-options">
          <select v-model="sortBy" @change="handleSortChange">
            <option value="date">上传时间</option>
            <option value="name">图片名称</option>
            <option value="size">文件大小</option>
          </select>
          
          <button class="sort-order" @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'; handleSortChange()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path v-if="sortOrder === 'asc'" d="M3 4h13M3 8h9M3 12h5M7 20V8"></path>
              <path v-else d="M3 4h13M3 8h9M3 12h5M7 20V8"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 图片网格 -->
    <div class="image-grid">
      <div v-if="loading" class="loading-indicator">
        <div class="spinner"></div>
        <span>加载中...</span>
      </div>
      
      <div v-else-if="imageList.length === 0" class="empty-state">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
          <circle cx="8.5" cy="8.5" r="1.5"></circle>
          <polyline points="21 15 16 10 5 21"></polyline>
        </svg>
        <p>没有找到图片</p>
      </div>
      
      <div v-else class="image-grid-content">
        <div class="image-card" v-for="image in imageList" :key="image.id">
          <div class="image-card-preview">
            <img :src="image.thumbnailUrl" :alt="image.name" />
          </div>
          
          <div class="image-card-info">
            <div class="image-card-name" :title="image.name">{{ image.name }}</div>
            <div class="image-card-meta">
              <span>{{ image.size }}</span>
              <span>{{ formatDate(image.uploadTime) }}</span>
            </div>
          </div>
          
          <div class="image-card-actions">
            <button class="action-btn" @click="copyImageLink(image.url)" title="复制链接">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
              </svg>
            </button>
            <button class="action-btn" @click="deleteImage(image.id)" title="删除">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                <line x1="10" y1="11" x2="10" y2="17"></line>
                <line x1="14" y1="11" x2="14" y2="17"></line>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分页 -->
    <div class="pagination" v-if="!loading && imageList.length > 0">
      <button 
        class="page-btn prev" 
        :disabled="currentPage === 1"
        @click="handlePageChange(currentPage - 1)"
      >
        上一页
      </button>
      
      <div class="page-info">
        第 {{ currentPage }} 页，共 {{ Math.ceil(totalCount / pageSize) }} 页
      </div>
      
      <button 
        class="page-btn next" 
        :disabled="currentPage >= Math.ceil(totalCount / pageSize)"
        @click="handlePageChange(currentPage + 1)"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<style scoped>
.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 20px;
}

.gallery-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.gallery-tools {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-box {
  display: flex;
  position: relative;
}

.search-box input {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 220px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s;
}

.search-box input:focus {
  border-color: #409EFF;
}

.search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #606266;
  cursor: pointer;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-options select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  background-color: white;
  transition: all 0.3s;
}

.sort-options select:focus {
  border-color: #409EFF;
}

.sort-order {
  background: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 7px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  transition: all 0.3s;
}

.sort-order:hover {
  border-color: #c0c4cc;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #409EFF;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 16px;
  color: #909399;
}

.image-grid-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.image-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.image-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

.image-card-preview {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.image-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.image-card:hover .image-card-preview img {
  transform: scale(1.05);
}

.image-card-info {
  padding: 12px;
}

.image-card-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.image-card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid #ebeef5;
  gap: 8px;
}

.action-btn {
  background: none;
  border: none;
  color: #909399;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #f2f6fc;
  color: #409EFF;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  gap: 16px;
}

.page-btn {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  color: #409EFF;
  border-color: #c6e2ff;
}

.page-btn:disabled {
  cursor: not-allowed;
  color: #c0c4cc;
  background-color: #f4f4f5;
}

.page-info {
  font-size: 14px;
  color: #606266;
}
</style> 